<template>
	<view class="container">
		<!--切换-->
		<view class="flex-row head-tabs">
			<view @click="toggleTab(0)" class="tab" :class="{active: tabIndex == 0}">
				<text>安全责任清单</text>
			</view>
			<view @click="toggleTab(1)" class="tab" :class="{active: tabIndex == 1}">
				<text>隐患排查清单</text>
			</view>
			<view @click="toggleTab(2)" class="tab" :class="{active: tabIndex == 2}">
				<text>应急处置卡</text>
			</view>
		</view>
		<!--滚动-->
		<!--安全责任清单-->
		<scroll-view  v-show="tabIndex == 0" scroll-y="true" class="scroll">
			<view class="card-box">
				<view class="card-box-content">
					<view  class="employee face">
						<view class="flex-row">
							<view class="left face">
								<image :src="userInfo.avatar"></image>
								<text>{{ userInfo.name }}</text>
							</view>
							<view class="right flex-row">
								<view class="flex-row">
									<text>我的职责</text>
									<view class="flex-column">
										<button v-if="userInfo.danka_zeren" class="btn success" type="warn" size="mini">已设置</button>
										<button v-if="!userInfo.danka_zeren" class="btn" type="warn" size="mini">未设置</button>
										<button v-if="userInfo.danka_zeren && !userInfo.sign_url" class="btn" type="warn" size="mini">未签名</button>
										<button v-if="userInfo.danka_zeren && userInfo.sign_url" class="btn success" type="warn" size="mini">已签名</button>
									</view>
								</view>
								<view>
									<view>部门：{{ userInfo.deptname }}</view>
									<view>职位：{{ userInfo.rolename }}</view>
								</view>
							</view>
						</view>
						<view v-if="userInfo.danka_zeren" class="duty">{{ userInfo.danka_zeren }}</view>
						<view class="sign">
							<view v-if="userInfo.sign_url" class="sign-image">
								<image :src="userInfo.sign_url"></image>
							</view>
							<view v-else class="buttons flex-row">
								<view @click="showSign">签字</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card-box">
				<view class="card-box-title">下属部门</view>
				<view class="card-box-content">
					<view @click="toPage('safe?id='+item.id)" v-for="(item, index) in childDept" :key="index" class="card">
						<view class="title flex-row">
							<view class="name">{{ item.fullname }}</view>
						</view>
						<view class="item">
							<text>员工总数：{{ item.user_num || 0 }}人</text>
							<text>已签订协议：{{ item.sign_num || 0 }}人</text>
						</view>
					</view>
				</view>
			</view>
			<view class="card-box">
				<view class="card-box-title">本部门</view>
				<view class="card-box-content">
					<view v-for="(item, index) in localDept" :key="index" class="card">
						<view class="title flex-row">
							<view class="name">{{ item.name }}</view>
						</view>
						<view class="item">
							<text>职位：{{ item.roleName }}</text>
							<text>状态：{{ item.is_sign ? '已签订协议' : '未签订协议' }}</text>
						</view>
						<view v-if="!item.is_sign" @click="toggleUrge(true, item.id)" class="btn">催办</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!--隐患排查清单-->
		<view  v-show="tabIndex == 1" class="danger-list">
			<view class="search">
				<view class="item icon-item">
					<view class="icons flex-row">
						<view class="flex-column">
							<image src="../../../static/img/grid/risk_level_1.png"></image>
							<text>{{ riskTopNum.one || 0 }}处</text>
						</view>
						<view class="flex-column">
							<image src="../../../static/img/grid/risk_level_2.png"></image>
							<text>{{ riskTopNum.two || 0 }}处</text>
						</view>
						<view class="flex-column">
							<image src="../../../static/img/grid/risk_level_3.png"></image>
							<text>{{ riskTopNum.three || 0 }}处</text>
						</view>
						<view class="flex-column">
							<image src="../../../static/img/grid/risk_level_4.png"></image>
							<text>{{ riskTopNum.four || 0 }}处</text>
						</view>
					</view>
					<view class="count flex-row">
						<text>风险总数：共{{ riskTopNum.all || 0 }}处</text>
						<text>更新时间：{{ riskTopNum.updatetime.split(' ')[0] }}</text>
					</view>
				</view>
				<view class="item flex-row">
					<view class="label">风险等级：</view>
					<picker @change="changeLevel" :value="riskLevel" :range="riskLevels">
						<view class="uni-input">{{ riskLevels[riskLevel] }}</view>
					</picker>
					<uni-icons type="arrowright" size="20" color="#666"></uni-icons>
				</view>
				<view class="item flex-row">
					<input type="text" v-model="riskTitle" placeholder="风险点名称" style="width: 100%;"/>
				</view>
				<button @click="getRiskCheckList" type="primary" class="item" style="background: #1692DC;">查询</button>
			</view>
			<scroll-view v-if="true" scroll-y="true" class="danger-list-scroll">
				<view v-for="(item, index) in riskList" :key="index" @click="toPage('danger?id='+item.id)" class="card danger">
					<view class="title flex-row">
						<view class="name">风险点名称：{{ item.title }}</view>
					</view>
					<view class="item">
						<view>风险等级：{{ riskLevels[item.LEVEL] }}</view>
						<view>管控等级：{{ item.gk_level }}</view>
					</view>
					<image v-if="item.level == 1" src="../../../static/img/grid/risk_level_1.png"></image>
					<image v-if="item.level == 2" src="../../../static/img/grid/risk_level_2.png"></image>
					<image v-if="item.level == 3" src="../../../static/img/grid/risk_level_3.png"></image>
					<image v-if="item.level == 4" src="../../../static/img/grid/risk_level_4.png"></image>
				</view>
				<view class="nodata">没有更多了~</view>
			</scroll-view>
			<view v-else class="nodata">没有更多了~</view>
		</view>
		<!--应急处置卡-->
		<view  v-show="tabIndex == 2" class="card-list">
			<view class="card-box" style="margin-bottom: 0;">
				<view class="card-box-content">
					<view  class="employee face flex-row">
						<view class="left face">
							<image :src="emergencyInfo.avatar"></image>
							<text>{{ emergencyInfo.name }}</text>
						</view>
						<view class="right flex-row">
							<view class="flex-row">
								<text>我的应急处置卡</text>
							</view>
							<view>
								<view>部门：{{ emergencyInfo.deptName }}</view>
								<view>职位：{{ emergencyInfo.zhiwei }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="search">
				<view class="item flex-row" @click="toPage('')">
					<view class="label">部门：</view>
					<picker v-if="depts.length" @change="changeDept" :value="emergencyDeptIndex" :range="depts" range-key="name">
						<view class="uni-input">{{ depts[emergencyDeptIndex].name || '所有部门' }}</view>
					</picker>
					<uni-icons type="arrowright" size="20" color="#666"></uni-icons>
				</view>
				<view class="item flex-row">
					<input type="text" v-model="emergencyDuty" placeholder="风险点名称" style="width: 100%;"/>
				</view>
				<button @click="getEmergencyList" type="primary" class="item" style="background: #1692DC;">查询</button>
			</view>
			<scroll-view v-if="true" scroll-y="true" class="card-list-scroll">
				<view v-for="(item, index) in emergencyList" :key="index" @click="toPage('emergency?id='+item.id+'&dept='+item.deptName)" class="card danger">
					<view class="title flex-row">
						<view class="name">姓名：{{ item.name }}</view>
					</view>
					<view class="item flex-row">
						<view>部门：{{ item.deptName }}</view>
						<view style="width: 50%;">职位：{{ item.zhiwei }}</view>
					</view>
				</view>
				<view class="nodata">没有更多了~</view>
			</scroll-view>
			<view v-else class="nodata">没有更多了~</view>
		</view>
		<!--签名弹出-->
		<uni-popup ref="popup" type="bottom" @change="toggleSign">
			<view class="popup-outter">
				<view class="popup-inner">
					<view class="popup-title">
						<text>签名</text>
						<view @click="clearClick" class="flex-row">
							<image src="../../../static/img/grid/clear.png" mode=""></image>
							<text>清除</text>
						</view>
					</view>
					<canvas
						canvas-id="firstCanvas" 
						disable-scroll='true' 
						@touchmove='move' 
						@touchstart='start($event)' 
						@touchend='end' 
						@touchcancel='cancel' 
						@longtap='tap' 
						@error='error'>
					</canvas>
					<view class="btns flex-row">
						<view @click="hideSign">返回看看</view>
						<view @click="overSign">签名</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniPopup from "@/components/uni-popup/uni-popup.vue"
import uniIcons from "@/components/uni-icons/uni-icons.vue";
import formAlert from "@/components/form-alert/index.vue";

var content = null;
var touchs = [];
var _that;

export default{
	components: { uniPopup,uniIcons,formAlert },
	data(){
		return {
			tabIndex: 0,
			isShowSign: false,
			userId: uni.getStorageSync('userid'),
			// 员工信息
			userInfo: {
				avatar: '/static/fengxianxuncha/user.png',
				name: '名称',
				rolename: '职位',
				deptname: '部门',
				danka_zeren: '',
				sign_url: ''
			},
			// 安全责任清单：下属部门
			childDept: [],
			// 安全责任清单：本部门
			localDept: [],
			// 催办弹窗
			urgeUserId: '',
			riskLevel: 0,
			riskTitle: '',
			riskLevels: ['全部','I级','II级','III级','IV级'],
			// 隐患排查清单头部数据
			riskTopNum: {
				all: 0,
				one: 0,
				two: 0,
				three: 0,
				four: 0,
				updatetime: ''
			},
			riskList: [],
			// 应急处置卡
			emergencyInfo: {
				avatar: '/static/fengxianxuncha/user.png',
				deptName: '',
				name: '',
				zhiwei: '',
				avatar: ''
			},
			emergencyList: [],
			emergencyDeptIndex: 0,
			emergencyDuty: '',
			depts: []
			
		}
	},
	onLoad(){
		// #ifdef APP-PLUS
		/* 隐藏凸起图标 */
		var icon = plus.nativeObj.View.getViewById("icon");
		setTimeout(function() {
			if(icon){icon.hide();}
		}, 100);
		// #endif
		
		_that = this
		
		//获得Canvas的上下文
		content = wx.createCanvasContext('firstCanvas');
		//设置线的颜色
		content.setStrokeStyle("#000");
		//设置线的宽度
		content.setLineWidth(5);
		//设置线两端端点样式更加圆润
		content.setLineCap('round');
		//设置两条线连接处更加圆润
		content.setLineJoin('round');
		
		// 获取数据列表
		this.getSafeDutyList();
	},
	onBackPress(){
		// 处理签名弹窗问题
		if(this.isShowSign){
			this.hideSign();
			return true;
		}
	},
	methods: {
		// 切换
		toggleTab(index){
			this.tabIndex = index;
			if(index == 0) this.getSafeDutyList();
			if(index == 1) this.getRiskCheckList();
			if(index == 2){
				this.getEmergencyList();
				this.getDeptList();
			}
		},
		// 跳转
		toPage(url){
			uni.navigateTo({url});
		},
		// 取消催办
		toggleUrge(bool, id=''){
			this.urgeUserId = id;
			console.log(this.urgeUserId)
			if(!bool) return;
			
			uni.showModal({
				title: '催办',
				content: '是否催办？',
				success: (res)=>{
					if(res.confirm){
						uni.request({
							url: this.$API.gridSafeDutyUrgeSign,
							data: {id},
							header: this.$API.get_head(),
							success: (res)=>{
								console.log(res)
								uni.showToast({
									icon: 'none',
									title: res.data.message
								})
							}
						})
					}
				}
			})
		},
		// 切换风险等级
		changeLevel(e){
			this.riskLevel = e.detail.value;
			this.getRiskCheckList();
		},
		// 切换部门
		changeDept(e){
			this.emergencyDeptIndex = e.detail.value;
			this.getEmergencyList();
		},
		// 安全责任清单
		getSafeDutyList(){
			let _this = this;
			uni.request({
				url: _this.$API.gridSafeDutyList,
				data: {userid: _this.userId},
				header: _this.$API.get_head(),
				success: (res)=>{
					let data = res.data.data;
					
					// 处理个人信息
					_this.userInfo.name = data.name;
					_this.userInfo.deptname = data.deptname;
					_this.userInfo.rolename = data.rolename;
					_this.userInfo.danka_zeren = data.danka_zeren;
					_this.userInfo.avatar = _this.$API.baseURL + data.avatar;
					_this.userInfo.sign_url = _this.$API.baseURL + data.sign_url;
					
					// 处理部门员工信息
					_this.childDept = data.childDept;
					_this.localDept = data.mydeptUser;
				}
			})
		},
		// 隐患排查清单
		getRiskCheckList(){
			let _this = this;
			uni.request({
				url: _this.$API.gridRiskCheckList,
				data: {
					userid: _this.userId,
					title: _this.riskTitle,
					level: _this.riskLevel,
				},
				header: _this.$API.get_head(),
				success: (res)=>{
					let data = res.data.data;
					_this.riskTopNum = data.topNum;
					_this.riskList = data.list.map(item=>{
						item.levelName = '';
						if(item.level == 1) item.levelName = 'I';
						if(item.level == 2) item.levelName = 'II';
						if(item.level == 3) item.levelName = 'III';
						if(item.level == 4) item.levelName = 'IV';
						return item;
					});
				}
			})
		},
		// 应急处置卡清单
		getEmergencyList(){
			let _this = this;
			uni.request({
				url: _this.$API.gridEmergencyList,
				data: {
					userid: _this.userId,
					deptid: _this.depts[_this.emergencyDeptIndex] ? _this.depts[_this.emergencyDeptIndex].id : '',
					zhiwei: _this.emergencyDuty,
				},
				header: _this.$API.get_head(),
				success: (res)=>{
					let data = res.data.data;
					_this.emergencyList = data.list;
					_this.emergencyInfo = data.top;
					_this.emergencyInfo.avatar = _this.$API.baseURL + data.top.avatar;
				}
			})
		},
		// 获取部门列表
		getDeptList(){
			var _this = this;
			uni.getStorage({
				key: 'company',
				success: function (companyRes){
					uni.request({
						url: _this.$API.deptList,
						method: "GET",
						data: {company: companyRes.data},
						header: _this.$API.get_head(),
						success: (res) => {
							let tmpDepts = res.data.data.map(item=>{
								item.name = item.fullname
								return item
							})
							tmpDepts.unshift({id: '', name: '所有部门'});
							_this.depts = tmpDepts;
						}
					})
				}
			})
		},
		// 打开签名
		showSign(){
			this.$refs.popup.open();
			this.isShowSign = true;
		},
		// 关闭签名
		hideSign(){
			this.$refs.popup.close();
			this.isShowSign = false;
			this.clearClick();
		},
		// 切换弹窗
		toggleSign(e){
			this.isShowSign = e.show;
			if(!e.show) this.clearClick();
		},
		// 上传签名
		uploadSign(filePath){
			let _this = this;
			uni.showLoading({title: '上传中'});
			uni.uploadFile({
				url: _this.$API.upload,
				name: 'file',
				filePath: filePath,
				success: function(res) {
					res.data = JSON.parse(res.data);
					let signUrl = res.data.fileName;
					
					// 上传图片
					uni.request({
						method: 'POST',
						url: _this.$API.gridUploadSignName,
						data: {
							userid: _this.userId,
							url: signUrl
						},
						header: _this.$API.get_head(),
						success: (res)=>{
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: res.data.message
							});
							if(res.data.code == 0){
								_this.hideSign();
								_this.userInfo.sign_url = _this.$API.baseURL + signUrl;
							}
						},
						fail: function(res) {
							uni.hideLoading();
							uni.showToast({
								title:"上传失败",
								icon:'none'
							});
						}
					})
				},
				fail: function(res) {
					uni.hideLoading();
					uni.showToast({
						title:"上传失败",
						icon:'none'
					});
				}
			});
		},
		// 签名完成
		overSign: function() {
			let _this = this;
			if (this.isEnd) {
				uni.canvasToTempFilePath({
					canvasId: 'firstCanvas',
					success: function(res) {
						_this.uploadSign(res.tempFilePath);
					}
				})
			} else {
				uni.showToast({
					title: '请先完成签名',
					icon: "none",
					duration: 1500,
					mask: true
				})
			}
		
		},
		// 画布的触摸移动开始手势响应
		start: function(event) {
			//获取触摸开始的 x,y
			let point = {
				x: event.changedTouches[0].x,
				y: event.changedTouches[0].y
			}
			touchs.push(point);
		},
		// 画布的触摸移动手势响应
		move: function(e) {
			let point = {
				x: e.touches[0].x,
				y: e.touches[0].y
			}
			touchs.push(point)
			if (touchs.length >= 2) {
				this.draw(touchs)
			}
		},
		// 画布的触摸移动结束手势响应
		end: function(e) {
			// 设置为已经签名
			this.isEnd = true
			// 清空轨迹数组
			for (let i = 0; i < touchs.length; i++) {
				touchs.pop()
			}
		},
		// 画布的触摸取消响应
		cancel: function(e) {
			console.log("触摸取消" + e)
		},
		// 画布的长按手势响应
		tap: function(e) {
			console.log("长按手势" + e)
		},
		error: function(e) {
			console.log("画布触摸错误" + e)
		},
		//绘制
		draw: function(touchs) {
			let point1 = touchs[0]
			let point2 = touchs[1]
			touchs.shift()
			content.moveTo(point1.x, point1.y)
			content.lineTo(point2.x, point2.y)
			content.stroke()
			content.draw(true)
		},
		//清除操作
		clearClick: function() {
			this.isEnd = false
			
			// 获取设备宽度
			uni.getSystemInfo({
				success: function(res) {
					content.clearRect(0, 0, res.windowWidth, 200);
				}
			});
			content.draw(true)
		},
	}
}
</script>

<style scoped>
.container{
	height: 100%;
}
.scroll{
	height: calc(100% - 80upx);
}
.danger-list,
.card-list{
	height: calc(100% - 80upx);
	overflow: hidden;
}
.danger-list-scroll{
	height: calc(100% - 550upx);
}
.card-list-scroll{
	height: calc(100% - 520upx);
}

.btn.success{
	background-color: #09BB07 !important;
}

/*签名弹窗*/
.popup-outter{
	background: #fff;
	padding: 10upx;
}
.popup-inner{
	background: #BFE9FF;
	border-radius: 10upx;
	padding: 0 20upx 20upx;
}
.popup-title{
	height: 80upx;
	line-height: 80upx;
	font-size: 32upx;
	text-align: center;
	position: relative;
}
.popup-title view{
	position: absolute;
	top: 14upx;
	right: 0;
}
.popup-title view image{
	width: 40upx;
	height: 40upx;
	margin-right: 8upx;
}
.popup-inner canvas{
	width: 100%;
	height: 400upx;
	background: #F0F0F0;
	border-radius: 10upx;
}
.popup-inner .btns{
	height: 100upx;
	line-height: 100upx;
	margin-top: 10upx;
	justify-content: center;
}
.popup-inner .btns view{
	background: #fff;
	border-radius: 10upx;
	padding: 10upx 60upx;
	box-shadow: 0 4upx 6upx #999;
}
.popup-inner .btns view:first-child{
	margin-right: 60upx;
}

/*隐患排查*/
.search{
	padding: 20upx 20upx 0;
}
.search .item{
	height: 80upx;
	line-height: 80upx;
	background: #fff;
	border-radius: 10upx;
	margin-bottom: 20upx;
	padding: 0 12upx;
}
.search .item.icon-item{
	height: auto;
}
.search .item.icon-item .icons{
	width: 100%;
	box-sizing: border-box;
	padding: 40upx 40upx 0;
}
.search .item.icon-item .count{
	padding: 0 30upx 12upx;
}
.search .item.icon-item image{
	width: 60upx;
	height: 70upx;
}
.search .item .label{
	width: 200upx;
	color: #797979;
	text-indent: 10upx;
}
.search .item picker{
	width: 85%;
}
.search .item input{
	color: #A3A3A3;
	font-size: 28upx;
	text-align: center;
	background: #F0F0F0;
	border-radius: 10upx;
	border: 2upx solid #509EC5;
	width: calc(100% - 120upx);
	height: 56upx;
}
.search .item button,
.search .item uni-button{
	line-height: 2.3;
	width: 112upx;
	margin-left: 8upx;
	background-color: #1692DC;
	font-size: 26upx !important;
}


/*卡片容器*/
.card-box{
	padding: 20upx 20upx 2upx;
	background: #fff;
	margin-bottom: 30upx;
}
.card-box-title{
	font-weight: bold;
	text-indent: 40upx;
	position: relative;
}
.card-box-title::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #609EF4;
	border-radius: 4upx;
	position: absolute;
	top: 12upx;
	left: 20upx;
}
.card-box-content{
	padding-top: 10upx;
}


/*卡片*/
.card{
	margin-bottom: 20upx;
	border-radius: 16upx;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
	position: relative;
}
.card.danger{
	background: #fff;
	margin: 0 20upx 20upx;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view{
	height: 42upx;
	font-size: 28upx;
}
.card .title view.name{
	text-indent: 20upx;
	font-weight: bold;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #5F96F2;
	border-radius: 4upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .item{
	text-indent: 20upx;
}
.card .item text{
	color: #999;
	margin-right: 40upx;
}
.card .btn{
	padding: 0;
	color: #fff;
	width: 120upx !important;
	height: 60upx;
	font-size: 26upx;
	line-height: 60upx;
	border-radius: 6upx;
	text-align: center;
	background-color: #F98202;
	position: absolute;
	bottom: 30upx;
	right: 20upx;
}
.card image{
	width: 46upx;
	height: 52upx;
	position: absolute;
	bottom: 50upx;
	right: 20upx;
}

/*头像卡片*/
.employee{
	padding: 20upx;
	background: #fff;
	border-radius: 16upx;
	margin-bottom: 20upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
}
.employee .left{
	width: 120upx;
	display: flex;
	line-height: 1;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.employee .left image{
	width: 60upx;
	height: 60upx;
	border-radius: 50%;
	margin: 10upx auto 10upx;
}
.employee .left text{
	color: #444;
	font-size: 28upx;
	overflow: hidden;
}
.employee .right{
	width: calc(100% - 130upx);
	position: relative;
}
.employee .right>view{
	width: 50%;
}
.employee .right .btn{
	line-height: 1;
	font-size: 24upx;
	margin: 10upx 20upx 0 0;
	padding: 6upx 20upx;
	background-color: #FF3334;
}
.employee .right image{
	width: 16px;
	height: 30px;
	position: absolute;
	right: -10upx;
	top: 45upx;
}
.employee .duty,
.employee .sign{
	margin-top: 20upx;
	padding: 12upx 20upx;
	border-radius: 10upx;
}
.employee .duty{
	height: 160upx;
	overflow-y: auto;
	background: #EEE;
	box-sizing: border-box;
}
.employee .sign{
	padding: 0;
}
.employee .sign .sign-image{
	width: 100%;
	height: 300upx;
	margin-bottom: 20upx;
	background: #F0F0F0;
}
.employee .sign .sign-image image{
	width: 100% !important;
	height: 100% !important;
}
.employee .sign .buttons{
	margin-top: 14upx;
	justify-content: center;
}
.employee .sign .buttons view{
	color: #fff;
	font-size: 24upx;
	margin-left: 20upx;
	padding: 6upx 80upx;
	border-radius: 6upx;
	background: #5F96F2;
}

/*tab切换*/
.head-tabs .tab{
	width: calc(100% / 3);
}

</style>
